<template>
	<view
		:class="layout === 'row' ? 'flex-row' : 'flex-column'"
		class="flex items-center"
		hover-class="bg-1"
		hover-start-time="0"
		hover-stay-time="50"
		@click="clickItem"
	>
		<view
			class="icon-block flex-center"
			:class="[extrClass, { largeBlock: size === 'large', miniBlock: size === 'mini' }]"
		>
			<text
				:class="[
					icon ? (icon.indexOf('t-icon') >= 0 ? 't-icon' : 'iconfont') : '',
					icon,
					{ large: size === 'large', mini: size === 'mini' },
				]"
			/>
		</view>
		<view class="flex-1 flex flex-row items-center" :class="layout === 'row' ? 'ml-1' : 'mt-1'">
			<text
				class="color-main text-m"
				:class="[{ 'text-xxl': size === 'large', 'text-m': size === 'mini' }, labelCls]"
				>{{ label }}</text
			>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		extrClass: {
			type: String,
			default: 'bg-color-2',
		},
		layout: {
			type: String,
			default: 'column',
		},
		icon: String,
		label: String,
		size: String,
		labelCls: String,
	},
	setup(props, ctx) {
		function clickItem(e) {
			ctx.emit('clickItem', e);
		}
		return {
			clickItem,
		};
	},
};
</script>

<style lang="scss">
.icon-block {
	width: 88rpx;
	height: 88rpx;
	border-radius: 50%;
}
.largeBlock {
	width: 128rpx;
	height: 128rpx;
}
.miniBlock {
	width: 32rpx;
	height: 32rpx;
}
.mini {
	height: 20rpx;
	width: 20rpx;
}
large {
	height: 64rpx;
	width: 64rpx;
}
.bg-error {
	background-color: rgba(245, 102, 98, 0.1);
	color: rgba(245, 102, 98);
}
.bg-warning {
	background-color: rgba(253, 131, 88, 0.1);
	color: rgba(253, 131, 88);
}
.bg-noti {
	background-color: rgba(57, 201, 225, 0.1);
	color: rgba(57, 201, 225);
}
.bg-device {
	background-color: rgba(61, 220, 132, 1);
	color: #ffffff;
}
</style>
